<%@ page import="com.scfire.project.Project;com.scfire.project.MainCate" %>
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="files">
        <title>火堆</title>
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'project_launch.css')}" type="text/css">
        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
    </head>
<body>

	<g:form id="projectForm" url="[resource:projectInstance, action:'save']" method="post" class="form-common">
        <section class="ui-container step1">
            <p class="txt">发布后可使用电脑对项目做精美编辑。<br/>网址：www.huodui.org</p>
            <input type= "hidden" name="id" id="id" value="${projectInstance.id}"/>
            <h4 class="title">项目描述</h4>
            <input name="name" type="text" value="${projectInstance.name}" placeholder="项目标题：如“为乡村学生上一堂梦想课”" oninput="characterReminder(10, 30,this,'#titleReminder')" onchange="characterAlert(10,this)">
            <p class="txt" id="titleReminder">最多输入<i>30</i>个字</p>            
            
            <div class="form-single-img">
                <p>项目海报</p>
                <div class="img-box" id="singleimg">
                    <input type="file" name="img" id="img">
                    <input type="hidden" name="projectimg" id="projectimg" value="" >
                </div>
            </div>
                      
            <textarea name="description" type="text" placeholder="项目简介" oninput="characterReminder(10, 100,this,'#desReminder')" onchange="characterAlert(30,this)">${projectInstance.description}</textarea>
            <p class="txt" id="desReminder">至少输入<i>10</i>个字</p>
            <textarea name="detail"  type="text" placeholder="项目内容" oninput="characterReminder(100, 1000,this,'#detailReminder')" onchange="characterAlert(100,this)">${projectInstance.detail}</textarea>
            <p class="txt" id="detailReminder">至少输入<i>100</i>个字</p>
            <h4 class="title">图文描述</h4>                        
            
            <div class="form-imgs" data-index="1">
                <div class="img-box-line">
                    <div class="img-box">
                        <b class="close"><img src="${resource(dir:'images',file:'icon-fork-white.png')}" alt=""></b>
                        <input type="file" name="img1" id="img1">
                        <input type="hidden"/>                       
                    </div>
                    <div class="img-txt">
                        <textarea type="text"  name="projectpiccontent" id="projectpiccontent1" placeholder="图片描述">${projectInstance.projectpiccontent}</textarea>
                    </div>
                </div>
            </div>
            
            <p class="txt">最多上传<i>10</i>张照片</p>

			<div id='hiddenPic'>
            </div>
            
            <button type="button" class="ui-btn-lg btn-red btn-next">下一步</button>
        </section>

        <section class="ui-container step2">
            <h4 class="title">项目描述</h4>
            <div class="ui-justify">
                <ul class="p-tag-list">
                    <li id="maincate100001" class='p-tag' onclick="maincate('100001')">教育助学</li>
                    <li id="maincate100002" class="p-tag" onclick="maincate('100002')">扶贫救灾</li>
                    <li id="maincate100003" class="p-tag" onclick="maincate('100003')">疾病救助</li>
                    <li id="maincate100004" class="p-tag" onclick="maincate('100004')">其他</li>                  
                </ul>
                <input type="hidden" name="maincate" value="${projectInstance.mainCate.code}" id="maincate"/>
                
            </div>
            
            <h4 class="title">项目目标</h4>
            <div class="form-input-box"><input type="text" disabled="disabled" value="${dateNum}" name="datanum" placeholder="筹款天数" onchange="checkInputNum(1, 99, this)"><i>天</i></div>
            <p class="txt">筹款范围<i>1~99</i>天</p>

            <h4 class="title">项目清单</h4>
            <ul class="task-list">
                <li>
                    <div class="hor-list">
		            <ul class="ui-row momeny-list">
		                <li class="ui-col ui-col-40 ui-border-b"><p class="ui-nowrap">品名</p></li>
		                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">单价</p></li>
		                <li class="ui-col ui-col-14 ui-border-b"><p class="ui-nowrap">数量</p></li>
		                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">合计</p></li>
		                
		                <g:each in="${projectInstance.fundraises}" var="fundraise">
		                	<li class="ui-col ui-col-40 ui-border-b"><p class="ui-nowrap">${fundraise.name}</p></li>
			                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥${fundraise.price}</p></li>
			                <li class="ui-col ui-col-14 ui-border-b"><p class="ui-nowrap">x${fundraise.count}</p></li>
			                <li class="ui-col ui-col-23 ui-border-b"><p class="ui-nowrap">￥${fundraise.price * fundraise.count}</p></li>
		                </g:each>
		            </ul>
                    </div>
                </li>
            </ul>
            
            
            <p class="txt-total">筹款金额 <span class="price" id='price_sum'><i>￥</i>${projectInstance.amount}</span></p>
            
            <button type="button" class="ui-btn-lg btn-red btn-next">上一步</button>
            <button type="submit" class="ui-btn-lg btn-red btn-next">提交</button>
        </section>
    </g:form>


	<script type="text/javascript">
	(function() {
		$('.p-tag-list > li').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
        });

		$('.p-tag-list').ready(function(){
            var cate = "#maincate"+"${projectInstance.mainCate.code}";
            $(cate).click();
        });

		$('.img-box-line').ready(function(){
            <g:each in="${projectPics}" var="projectPic">
            addImgInfo('${projectPic.pic}', '${projectPic.content}' );
        	</g:each>
        });

		$('#singleimg').ready(function(){
            var pic = '${projectInstance.img}';
            var imageurl = "/scfire/project/imgRead?img="+pic;	                   
            $("#singleimg").css('background-image', 'url(' + imageurl + ')');
            //图片地址赋值给后台
            $("#projectimg").val(pic);  
        });

        $('.form-imgs').on('click', '.img-box .close', function(){
          //  $(this).parents('.img-box').remove();
            var a = $(this).parents('.img-box-line')[0] || $(this).parents('.img-box')[0];
            var data = $(this).parent('.img-box').css('background-image');//
            var position = data.indexOf('=');
            data = data.substr(position, data.length - position-1);
            //alert("position"+ position +data);
            $(a).remove();
            //index --
            var index = parseInt($('.form-imgs').attr('data-index'));
            $('.form-imgs').attr('data-index', --index);
            //remove imgs input
            alert($('input[value'+data+']').val());
            $('input[value'+data+']').remove();
            
        })
     	//项目海报上传事件
     	$('.form-single-img').on('change', '.img-box input[type=file]', function(){
            var file = $('.form-common .form-single-img .img-box input[type=file]').attr('id')
     			$.ajaxFileUpload({  
        			url:'/scfire/project/imgSaveMb',  
        			secureuri:false,  
        			dataType:'text',
        			fileElementId:file,//file标签的id 
        			success: function (data, status) { 
		           	if(data=='large'){
		           		showWarn('图片过大')
		           		return
		           	}
		       		if(data=='format'){
		           		showWarn('图片格式不对')
		           		return
		           	}
	               //把图片替换  
	               if(data=='fail'){
	               		showWarn('上传失败')
	               }else{
	            	   //图片预览
	                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
	                   $("#singleimg").css('background-image', 'url(' + imageurl + ')');
	                   //图片地址赋值给后台
	                   $("#projectimg").val(data);                
	               }
		           },  
		           error: function (data, status, e) {  
		           }
		       	 });
        })
        
     	//项目图文上传事件
          $('.form-imgs').on('change', '.img-box-line:last-child input[type=file]', function(){
            var files = [$('.img-box-line:last-child input[type=file]').attr('id')]
     			$.ajaxFileUpload({  
        			url:'/scfire/project/imgSaveMb',  
        			secureuri:false,  
        			dataType:'text',
        			fileElementId:files,//file标签的id 
        			success: function (data, status) { 
		           	if(data=='large'){
		           		showWarn('图片过大')
		           		return
		           	}
		       		if(data=='format'){
		           		showWarn('图片格式不对')
		           		return
		           	}
	               //把图片替换  
	               if(data=='fail'){
	               	showWarn('上传失败')
	               }else{
	            	   //图片预览
	                   var imageurl = "/scfire/project/imgRead?img="+data;
	                   addNewImgPreview(imageurl);
	                   //图片地址赋值给后台
	                   $("#hiddenPic").html($("#hiddenPic").html()+'<input type="hidden" name="projectpic" value="'+data+'"/><br/>');
	                   //图文内容传给后台
	                   var imgs = $('.form-imgs');
	                   var index = parseInt(imgs.attr('data-index'));
	                   index++;                   
	                   var html = '<div class="img-box-line"><div class="img-box"><b class="close"><img src="../images/icon-fork-white.png" alt=""></b><input type="file" name="img1" id="img' + (index) + '"></div><div class="img-txt"><textarea type="text" name="projectpiccontent" id="projectpiccontent" placeholder="图片描述"></textarea></div></div>';
	                   imgs.attr('data-index', index).append(html);		                            
	               }
		           },  
		           error: function (data, status, e) {  
		           }
		       	 });
        })


        $('section.step1 .btn-next').click(function(){
            $('section.step1').hide();
            $('section.step2').show();
        });

        $('section.step2 .btn-next').click(function(){
            $('section.step1').show();
            $('section.step2').hide();
        });

        $('.form-common').on('click', '.form-num-box .btn-minus', function(){
            calFormNum($(this).siblings('input'), false);
            sum();
        });
        $('.form-common').on('click', '.form-num-box .btn-plus', function(){
            calFormNum($(this).siblings('input'), true);
            sum();
        });

        $('.form-common .btn-add-task').click(function(){
            var html = '<li><input type="text" name="fundraisename" placeholder="筹集内容名称，如“篮球”"><div class="hor-list"><div class="hor-box"><div class="form-input-box"><input type="text" name="fundraiseprice" placeholder="单价" onkeyup="correctInputNum(this);sum();" onafterpaste="correctInputNum(this);sum();"><i>元</i></div><div class="txt-center">数量</div><div class="form-num-box"><div class="btn-minus">-</div><input type="text" name="fundraisenum" value="1" onkeyup="correctInputNum(this);sum();" onafterpaste="correctInputNum(this);sum();"><div class="btn-plus">+</div></div></div></div></li>';           
            $('.form-common ul.task-list').append(html);
        });
        
        
    })();



	function addImgInfo(data, context){
		var imageurl = "/scfire/project/imgRead?img="+data;
        addNewImgPreview(imageurl);
        //图片地址赋值给后台
        $("#hiddenPic").html($("#hiddenPic").html()+'<input type="hidden" name="projectpic" value="'+data+'"/>');
        //图文内容传给后台
        var imgs = $('.form-imgs');
        var index = parseInt(imgs.attr('data-index'));
        $("#projectpiccontent"+index).html(context);  
        index++;                   
        var html = '<div class="img-box-line"><div class="img-box"><b class="close"><img src="../images/icon-fork-white.png" alt=""></b><input type="file" name="img1" id="img' + (index) + '"></div><div class="img-txt"><textarea type="text" name="projectpiccontent" id="projectpiccontent'+index+'" placeholder="图片描述"></textarea></div></div>';
        imgs.attr('data-index', index).append(html);
	}
	
    // input file 的 id 以  img1 img2 img3 …… 以此类推命名
    function addNewImgPreview (url) {
        var imgs = $('.form-imgs');
        imgs.find('.img-box-line:last-child .img-box').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
        //     
    }

    function calFormNum (obj, add) {
        if (typeof add == 'undefined') {
            add = true;
        }

        correctInputNum(obj);
        var c = parseInt($(obj).val());    
        c += (add ? 1 : -1);
        if (c < 1) {
            c = 1;
        } else if (c > 99) {
            c = 99;
        }
        $(obj).val(c);
    }

    function correctInputNum (obj) {
        var v = correctNum($(obj).val());
        if (v == '') {
            $(obj).val('1');
        } else {
            $(obj).val(v);
        }
    }
    function correctNum (num) {
        return (num + '').replace(/\D/g, '');
    }

    function maincate(code){
		$("#maincate").val(code);
	}

    function showWarn (str) {
        var html = '<div class="ui-poptips-cnt"><i></i>';
        html += str;
        html += '</div>';
        var obj = document.createElement('div');
        $(obj).addClass('ui-poptips ui-poptips-warn');
        $(obj).append(html);
        $('body').append(obj);
        setTimeout(function(){
            $(obj).fadeOut(500);
            setTimeout(function(){
                $(obj).remove();
            }, 500);
        }, 1500);
    }

    function characterReminder(least , most, element, tag){
        var lenght = element.value.length;
        var left = most - lenght-1;
        //清除多余字符
        if(left < 0){
        	element.value = element.value.substr(0,most-1);
        	left = 0;
        }
        //重置提示内容
        var selector= tag;
        $(selector).html("<p class='txt'>还能输入<i>"+left+"</i>个字</p>");
        //console.log($(selector).html());
    }

    function characterAlert(least, element){
    	var lenght = element.value.length;
    	if(lenght < least){
            alert('请至少输入'+least+'个字');
            element.focus();
        }
    }

    function checkInputNum(least, most, element){
    	var num = element.value; 
        if(!(/^\d+$/.test(num))){
        	alert(num); 
            alert("输入的数字有误！");
            element.value = least;
        }
        else if(num < least){
        	alert("天数不能小于"+least+"！");
        	element.value = least;
        }
        else if(num > most){
        	alert("天数不能大于"+most+"！");
        	element.value = most;
        }
    }
    
	</script>

</body>
</html>